<template>
  <view class="cont">
  <!--  <view class="listcat">
      <view class="listtitle">分类 :</view>
      <view class="listname">
        
      </view>
    </view> -->
	
    
    <block >
      <view class="gridSm g1 bg" v-if="list.length>0">
	  <view style="text-align:center;margin-bottom:20rpx;margin-top:-33rpx;">↑↑上滑加载更多书籍↑↑</view>
        <uni-books-qi :data="item" v-for="(item,index) in list" :key="index" @flags="flag"></uni-books-qi>
      </view>
      <view  class="gridSm g1 bg iconfont" v-else>
        <text style="font-size:30rpx;">&#xe605;</text>
      <text>{{$t('book.dqlm')}}</text></view>  
    </block>
  </view> 
</template>
<script>
   import _qdcat from '@/util/qidian.js';
  export default {
    data() {
      return {
        bottom: 100, //调整以控制组件距页面底部的距离,实际上是一个div遮罩层
        listcat: [],
        tabIndex:0, 
        hotIndex:0,
        list:[],
        limit:20,
        page:0,
        cid:'',
		pid:'',
        listhot:[{name:'全部',value:''},{name:'完本',value:1},{name:'连载',value:0}]
      }; 
    },
    onLoad(e) {
      let data = uni.getStorageSync('list_cat');
      this.cid=e.cid;
	  this.pid=e.pid;
	  this.type=e.type;
      this.listcat = data
	 
     this.popup()
    },
    onReachBottom(){
      this.page=this.page+1
      this.popup()
      console.log(this.page)
    },
    methods: {
      tabs(e) {
       
        this.tabIndex=e
        this.page=1
		this.cid=this.listcat[e].cid;
		this.pid=this.listcat[e].pid;
		uni.setNavigationBarTitle({ title: this.listcat[e].listname })
        this.popup(1)
      },
      flag(e) {
		  console.log(e)
        uni.navigateTo({
          url: '/pages/book_mall/details?type=list&name=' + e.title.replace(/（[^）]*）/g, "")+'&author=' + e.author
        });
      },
      popup() {
        let _this=this;
		
     _qdcat.categories(this.cid,this.limit,this.page).then((res) => { 
		console.log(res)
        if(this.page>0){
        this.list=[...this.list,...res];
        }else{
        this.list=res;
        }
		});

      }
    }
  };
</script>

<style lang="less">
  .cont{
    padding: 20rpx;
  }
.listcat{
  display: inline-flex;
  line-height: 80rpx;
}
.gridSm{
  margin-top: 30rpx;
}
.listtitle{
   display: inline-block;
   width: 100rpx;
   line-height: 85rpx;
   font-size: 28rpx;
   padding-left:10rpx ;
}
.listname{
  width:600rpx;
  }
.iconfont{
  text-align: center;
  margin-top:160rpx
}
</style>
